<!--
 * @Author: your name
 * @Date: 2022-02-16 12:51:28
 * @LastEditTime: 2022-02-16 14:45:26
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \web-vue\src\views\inc\Tabs.vue
-->
<template>
  <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
    <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">

    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name:"Tabs",
  data() {
      return {
      }
    },
  computed:{
    editableTabs:{
      get(){
        return this.$store.state.menus.editableTabs
      },
      set(val){
        this.$store.state.menus.editableTabs = val
      }
    },
    editableTabsValue:{
      get(){
        return this.$store.state.menus.editableTabsValue
      },
      set(val){
        this.$store.state.menus.editableTabsValue = val
      }
    }

  },
  methods: {
      
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;

        if(targetName==='Index'){
          return
        }
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);


        this.$router.push({name:activeName})
      },
      clickTab(target){
        this.$router.push({name:target.name})

      }
    }
  }
</script>

<style>
</style>